<!--
 * @Author: lmk
 * @Date: 2022-04-14 14:27:07
 * @LastEditTime: 2022-07-01 10:28:57
 * @LastEditors: lmk
 * @Description: 
-->
<template>
  <div class="footer">
    <div class="footer-content xl:flex">
      <!-- left -->
      <div class="left-infomation">
        <div class="logo-view flex hide-mobile">
          <div class="txt-en">
            <!-- <p>Beijing</p>
            <p>Oriental</p>
            <p>Orchestra</p> -->
            <img src="/img/logo.jpg" alt="" class="logo" />
          </div>
          <div class="team-title self-center">
            <p v-if="showZh" class="txt-zh">{{ $t("footer.teamTitlezh") }}</p>
            <p class="txt-en">{{ $t("footer.teamTitleen") }}</p>
          </div>
        </div>
        <div class="team-info">
          <p>{{ $t("footer.addressTitle") }}: {{ $t("bandAddress") }}</p>
          <p>{{ $t("footer.workTime") }}: {{ $t("bandWorkTime") }}</p>
          <p>
            {{ $t("footer.cantact") }}: {{ $t("bandPhone") }}/{{ $t('bandEmail', { account:bandInfo.account}) }}
          </p>
        </div>
      </div>
      <!-- right -->
      <div class="flex-grow right-from">
        <p class="hide-mobile">{{ $t("footer.message") }}:</p>
        <div class="textarea-box">
          <input
            class="textarea"
            v-model="from.levelContent"
            :placeholder="$t('footer.messagePlaceHold')"
          />
        </div>
        <div class="grid xl:grid-cols-3 xl:gap-10">
          <div class="grid grid-cols-2 hide-pc gap-5">
            <div class="textarea-box">
              <input
                class="textarea"
                v-model="from.levelName"
                :placeholder="$t('footer.messageName')"
              />
            </div>
            <div class="textarea-box">
              <input
                class="textarea"
                v-model="from.levelPhone"
                :placeholder="$t('footer.messageCantact')"
              />
            </div>
          </div>
          <div class="textarea-box hide-mobile">
            <input
              class="textarea"
              v-model="from.levelName"
              :placeholder="$t('footer.messageName')"
            />
          </div>
          <div class="textarea-box hide-mobile">
            <input
              class="textarea"
              v-model="from.levelPhone"
              :placeholder="$t('footer.messageCantact')"
            />
          </div>
          <div class="textarea-box">
            <input
              class="textarea"
              v-model="from.email"
              :placeholder="$t('footer.messageEmail')"
            />
          </div>
        </div>
        <div class="submit" @click="submit">{{ $t("footer.messageBtn") }}</div>
      </div>
    </div>
    <img src="/img/footer/line-l.png" alt="" class="line" />
    <div class="copyright">copyRight</div>
  </div>
</template>

<script>
import { useIsZh } from "@/utils/useIsZh";
import { useI18n } from "vue-i18n";
import { reactive } from "@vue/reactivity";
import { message } from "ant-design-vue";
import { getWebsiteBandById, levelMessage } from "@/api/api";
export default {
  setup() {
    const { locale, t, mergeLocaleMessage } = useI18n();
    const { isZh } = useIsZh();
    const from = reactive({
      levelContent: "",
      levelName: "",
      levelPhone: "",
      email: "",
    });
    const submit = () => {
      if (!from.levelContent) {
        message.warning(t("footer.messagePlaceHold"));
        return;
      }
      if (!from.levelName) {
        message.warning(t("footer.messageName"));
        return;
      }
      if (!from.levelPhone) {
        message.warning(t("footer.messageCantact"));
        return;
      }
      if (!from.email) {
        message.warning(t("footer.messageEmail"));
        return;
      }
      levelMessage(from).then(() => {
        message.success(t("footer.messageSuccess"));
        from.levelContent = "";
        from.levelName = "";
        from.levelPhone = "";
        from.email = "";
      });
    };
    const bandInfo = reactive({});
    getWebsiteBandById().then((res) => {
      if (res) {
        const {
          bandAddress, //乐团地址 ,
          bandAddressEnglish,
          bandDesc, // 乐队简介描述 ,
          bandDescEnglish,
          bandEmail, // 联系方式邮箱 ,
          bandFigureImage, //  简介封面 ,
          bandInformation, // 简介详情 ,
          bandInformationEnglish,
          bandName, // 乐团名称 ,
          bandNameEnglish,
          bandPhone, // 联系方式手机号 ,
          bandWorkTime, // 工作时间 ,
          bandWorkTimeEnglish,
        } = res;
        mergeLocaleMessage("zh", {
          bandAddress,
          bandDesc,
          bandInformation,
          bandName,
          bandPhone,
          bandWorkTime,
          bandFigureImage,
          bandEmail: "{account}"
        });
        mergeLocaleMessage("en", {
          bandAddress: bandAddressEnglish,
          bandDesc: bandDescEnglish,
          bandInformation: bandInformationEnglish,
          bandName: bandNameEnglish,
          bandWorkTime: bandWorkTimeEnglish,
          bandFigureImage,
          bandEmail: "{account}",
          bandPhone
        });
        bandInfo.account = bandEmail;
        bandInfo.domain = bandEmail;
        bandInfo.bandFigureImage = bandFigureImage;
      }
    });
    return { locale, showZh: isZh, from, submit, bandInfo };
  },
};
</script>

<style lang="scss" scoped>
@mixin border-bottom-1px {
  border-bottom: 1px solid #707070;
}
@media screen and (max-width: 1401px) {
  .team-info {
    color: white;
    font-size: 12px;
    line-height: 24px;
    p {
      &:not(:last-child) {
        margin-bottom: 10px;
      }
    }
  }

  
  .submit {
    width: 69px;
    height: 20px;
    background: $activeTxt;
    border-radius: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 9px;
    color: white;
    margin: 14px auto 0;
  }
  .footer {
    background-image: url(/img/footer/footerbg-m.png);
    background-size: 375px 265px;
    background-repeat: no-repeat;
    background-position: top;
  }
  .footer-content {
    color: white;
    padding: 15px;
  }
  .right-from {
    background: transparentize($color: #707070, $amount: 0.79);
    padding: 34px 10px;
    margin-top: 15px;
    .textarea-box {
      @include border-bottom-1px;
    }
    .textarea {
      outline: none;
      resize: none;
      width: 100%;
      background: transparent;
      height: 28px;
      font-size: 9px;
      &::placeholder {
        color: white;
      }
    }
  }

  .copyright {
    text-align: center;
    color: white;
    font-size: 12px;
    line-height: 40px;
  }
}
@media screen and (min-width: 1400px) {
  .copyright {
    text-align: center;
    color: white;
    font-size: 12px;
    line-height: 40px;
  }
  .team-info {
    color: white;
    font-size: 18px;
    p {
      line-height: 1;
      &:not(:last-child) {
        margin-bottom: 20px;
      }
    }
  }

  .submit {
    width: 138px;
    height: 40px;
    background: $activeTxt;
    border-radius: 20px;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    color: white;
    margin: 28px auto 0;
  }
  .footer {
    background-image: url(/img/footer/footerbg.png);
    background-size: 2220px 485px;
    background-repeat: no-repeat;
    background-position: top;
    padding: 0 80px;
    &-content {
      padding: 62px 0 65px;
    }
    .right-from {
      background: transparentize($color: #707070, $amount: 0.79);
      padding: 13px 29px;
      margin-left: 83px;
      color: white;
      font-size: 18px;
      .textarea-box {
        padding-top: 14px;
        @include border-bottom-1px;
      }
      .textarea {
        outline: none;
        resize: none;
        width: 100%;
        background: transparent;
        height: 20px;
        margin-bottom: 14px;
        &::placeholder {
          color: white;
        }
      }
    }
    .left-infomation {
      .logo-view {
        color: $activeTxt;
        .txt-en {
          font-family: "zyt";
        }
        .txt-zh {
          font-size: 20px;
        }
        .team-title {
          margin-left: 104px;
        }
      }
      .team-info {
        margin-top: 60px;
      }
    }
  }

  .copyright {
    text-align: center;
    color: white;
    font-size: 24px;
    line-height: 80px;
  }
}
.logo {
  width: 90px;
}

.line {
  width: 100%;
  height: 1px;
}
</style>